<template>
	<view class="box">
		<template v-if="user">
			<view class="barTitle" :style="{ top: top + 'px', height: height + 'px' }">我的</view>
			<!-- 占位 -->
			<u-gap :height="top + 45"></u-gap>

			<view class="header">
				<image class="header-img" :src="user.head" style="border-radius: 50%;" mode="aspectFill"></image>
				<view class="header-c">
					<view class="header-c-t">
						<view class="header-c-t-l">
							<view class="header-c-t-l-name">{{ user.nickname }}</view>
							<image class="header-c-t-l-sex"
								:src="user.sex === '男' ? ossUrl + `/static/card/6.png` : ossUrl + `/static/index/女士.png`"
								mode=""></image>
							<image @click="openMember"
								:src="ossUrl + `/static/image/vip/${userInfo.vip === 1 ? 4 : 3}.png`" mode="heightFix"
								class="header-c-t-l-member"></image>

							<view class="headbg">
								<view class="header-c-t-l-btn" @click="openPopupCard()">
									<image :src="ossUrl + `/static/my/二维码 (2).png`" mode=""></image>
									数字名片
								</view>
								<view class="xz" @click="download">下载</view>
							</view>
						</view>
						<!-- <image class="header-c-t-setting" :src="ossUrl + `/static/my/设置 (2).png`"></image> -->
					</view>
					<view class="header-c-age" v-if="userInfo.vip === 1">VIP <text
							style="margin: 0 10rpx;">至</text>{{userInfo.vip_end_time || ''}}</view>
					<view class="header-c-zc" v-if="user.name != '无' && user.name">{{ user.name }}</view>
				</view>
			</view>
			<!-- v-if="userInfo.vip != 1" -->
			<view class="header-box">
				<view class="headerCard-t flex-row-between" @click="openMember">
					<view class="flex-row" style="font-weight: bold;">
						<view class="imgbg">
							<image :src="ossUrl + '/static/image/vip/2.png'" class="vip-img"></image>
						</view>

						VIP会员可享受10+超级特权
					</view>
					<view class="kt">立即{{userInfo.vip === 1?'续费':'开通'}}</view>
				</view>
				<view class="header-box-card">
					<view>
						<view class="header-box-card-tx">入圈收益</view>
						<view class="header-box-card-num">￥{{MyIncome.rq || 0}}</view>
					</view>
					<view>
						<view class="header-box-card-tx">带货收益</view>
						<view class="header-box-card-num">￥{{MyIncome.dh || 0}}</view>
					</view>
					<view>
						<view class="header-box-card-tx">活动收益</view>
						<view class="header-box-card-num">￥{{MyIncome.hd || 0}} </view>
					</view>
					<view>
						<view class="header-box-card-tx">知识付费</view>
						<view class="header-box-card-num">￥{{MyIncome.zs || 0}} </view>
					</view>
				</view>
				<view class="header-box-c">
					<view v-if="MyIncome.founder == 1">
						<view class="header-box-c-tx">联创收益</view>
						<view class="header-box-c-num">￥{{MyIncome.lc || 0}}</view>
					</view>
					<view>
						<view class="header-box-c-tx">总收益</view>
						<view class="header-box-c-num">￥{{MyIncome.incomeSum || 0}}</view>
					</view>
					<view>
						<view class="header-box-c-tx">冻结收益 </view>
						<view class="header-box-c-num">￥{{MyIncome.Freeze_income || 0}}</view>
					</view>
					<view>
						<view class="header-box-c-tx">余额 </view>
						<view class="header-box-c-num">￥{{MyIncome.balance || 0}}</view>
					</view>
				</view>
				<view class="headerCard-r" style="padding-bottom: 20rpx;">
					<view class="withdraw" @click="sure" v-if="MyIncome.withdrawal.count > 0">
						{{MyIncome.withdrawal.title || '提现'}}
					</view>
					<view class="withdraw" @click="open" v-else>提现</view>
					<view class="record" @click="toPage('提现记录')">收支明细</view>
				</view>
			</view>
			<view class="mpbox" @click="gosharecard">
				<image :src="ossUrl + `/static/scbanner.jpg`" mode="widthFix"></image>
			</view>
			<view class="list">
				<view class="list-item-c" @click="toPage('我的订单')">
					<image :src="ossUrl + `/static/my/图层 2463 拷贝.png`" mode=""></image>
					我的订单
				</view>
				<view class="list-item-c" @click="toPage('我的消息')">
					<image :src="ossUrl + `/static/laba.png`" mode=""></image>
					我的消息
				</view>
				<!-- v-if="user.identity_type == 1" -->
				<view class="list-item-c" @click="toPage('管理视频')">
					<image :src="ossUrl + `/static/my/图层 2475(1).png`" mode=""></image>
					知识分享
				</view>
				<view class="list-item-c" @click="toPage('日志管理')">
					<image :src="ossUrl + `/static/my/图层 3747.png`" mode=""></image>
					日志管理
				</view>
				<view class="list-item-c" @click="toPage('兴趣管理')">
					<image :src="ossUrl + `/static/my/图层 3747.png`" mode=""></image>
					兴趣管理
				</view>
				<view class="list-item-c" @click="toPage('我的收藏')">
					<image :src="ossUrl + `/static/my/图层 2475.png`" mode=""></image>
					我的收藏
				</view>
				<view class="list-item-c" @click="toPage('联合创始')" v-if="MyIncome.founder == 1">
					<image :src="ossUrl +  `/static/image/l1.png`" mode=""></image>
					联合创始
				</view>
				<view class="list-item-c" @click="toPage('带货')" v-if="shopping_mall == 1">
					<image :src="ossUrl + `/static/image/m2.png`" mode=""></image>
					带货
				</view>
				<view class="list-item-c" @click="toPage('能量站')">
					<image :src="ossUrl + `/static/image/l8.png`" mode=""></image>
					能量站
				</view>
				<view class="list-item-c" @click="toPage('提现资料')"
					v-if="MyIncome.balance && Number(MyIncome.balance) > 0">
					<image :src="ossUrl +  `/static/image/yh.png`" mode=""></image>
					提现设置
				</view>
				<view class="list-item-c" @click="toPage('认证中心')">
					<image :src="ossUrl + `/static/my/图层 2495.png`" mode=""></image>
					认证中心
				</view>
				<view class="list-item-c" @click="toPage('圈子管理')" v-if="userInfo.circle_id">
					<view class="end" v-if="circleEnd">到期</view>
					<image :src="ossUrl + `/static/image/m1.png`" mode=""></image>
					圈子管理
				</view>
				<view class="list-item-c" @click="toPage('用户帮助')">
					<image :src="ossUrl + `/static/my/图层 2470.png`" mode=""></image>
					用户帮助
				</view>
				<view class="list-item-c" @click="toPage('平台客服')">
					<button open-type="contact"></button>
					<image :src="ossUrl + `/static/my/图层 2495(1).png`" mode=""></image>
					平台客服
				</view>
			</view>
			<!-- 占位 -->
			<u-gap height="80"></u-gap>
			<WithdrawalPopup ref="WithdrawalPopupRef" @reload="reload" />
		</template>
		<template v-else>
			<u-gap :height="top + 45"></u-gap>
			<view class="auth" @click="toLogin">
				<image :src="ossUrl +  '/static/image/头像-copy-copy.png'" mode=""></image>
				游客
			</view>
		</template>
		<view :class="{ 'gz': true, 'gz-ac': isShow }">
			<view class="gz-tx">收到名片交换请求时，及时通知我</view>
			<view class="gz-btn" @click="subShow">开启</view>
			<view class="gz-close" @click="closeShow">
				<view class="gz-close-icon">
					<u-icon name="close" color="#fff" size="10"></u-icon>
				</view>

			</view>
		</view>
		<u-popup :show="showPopup" title="关注公众号" mode="center" :safeAreaInsetBottom="false" @close="cancel"
			bgColor="transparent">
			<view class="slot-content">
				<view class="slot-content-img">
					<image :src="popupImg" mode="widthFix" :show-menu-by-longpress="true"></image>
				</view>
			</view>
		</u-popup>

		<u-popup :show="showPopupCard" title="数字名片" mode="center" :safeAreaInsetBottom="false"
			@close="showPopupCard = false" bgColor="transparent">
			<view class="slot-content">
				<view class="slot-content-img">
					<image :src="user.user_QR_code" mode="widthFix" :show-menu-by-longpress="true"></image>
				</view>
			</view>
		</u-popup>
		<!-- 会员弹窗 -->
		<MemberPopupVue ref="MemberPopupVueRef" @reload="reload" />
		<l-painter :board="template" style="width: 100%;" ref="painterRef" custom-style="position: fixed; left: 200%" />
	</view>
</template>

<script>
	import WithdrawalPopup from '@/components/withdrawalPopup/withdrawalPopup.vue'
	import MemberPopupVue from '@/components/memberPopup/memberPopup.vue'
	import {
		InformationMyIncome,
		InformationWithdrawalDetails,
		InformationUserInfo,
		InformationOfficialAccount,
		InformationBusinessCard,
		gzhewm,
		official_account,
		official_account_close,
		receive
	} from '@/common/http/api.js'
	export default {
		components: {
			WithdrawalPopup,
			MemberPopupVue
		},
		data() {
			return {
				circleEnd: 0,
				template: {},
				top: 0,
				height: 0,
				MyIncome: '',
				user: '',
				userInfo: '',
				isShow: false,
				showPopup: false,
				popupImg: '',
				isCard: false,
				vipPopupShow: false,
				currentType: 1,
				showPopupCard: false,
				shopping_mall: 0
			}
		},
		created() {
			// 获取胶囊按钮的位置信息
			let menuButtonRect = wx.getMenuButtonBoundingClientRect();

			this.top = menuButtonRect.top
			this.height = menuButtonRect.height
			// 输出具体的位置和尺寸信息


		},
		onShow() {
			this.$store.dispatch('updateMessageCount')
			this.getData()
			//判断是否领取名片
			uni.showLoading()

			// console.log()


			InformationBusinessCard().then(res => {

				if (Array.isArray(res.data) && res.data.length === 0) {
					//没有名片
					this.isCard = false
				} else {
					this.isCard = true
					if (res.data.circle_id) {
						InformationMyIncome({
							circle_id: res.data.circle_id
						}).then(res => {
							this.shopping_mall = res.data.shopping_mall
						})
					}

				}

			}).finally(err => {
				uni.hideLoading()
			})
		},
		methods: {

			download() {
				uni.showLoading({
					mask: true
				})
				this.$nextTick(() => {
					this.$refs.painterRef.canvasToTempFilePathSync({
						fileType: "jpg",
						pathType: 'url',
						quality: 1,
						success: (res) => {

							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath, // 下载后的临时路径
								success: () => {
									uni.hideLoading()
									uni.showToast({
										duration: 3000,
										title: '下载成功',
										icon: 'none'
									});
								},
								fail: (err) => {
									uni.hideLoading()
									uni.showToast({
										duration: 3000,
										title: '下载失败',
										icon: 'none'
									});
								}
							});
						},
					});
				})


			},

			sure() {
				receive().then(res => {
					if (wx.canIUse('requestMerchantTransfer')) {
						wx.requestMerchantTransfer({
							mchId: res.data.mchId,
							appId: res.data.appId,
							package: res.data.package,
							success: (res) => {

								InformationMyIncome().then(res => {
									this.MyIncome = res.data
									this.user = res.data.user
								})


							},
							fail: (res) => {

							},
						});
					} else {
						wx.showModal({
							content: '你的微信版本过低，请更新至最新版本。',
							showCancel: false,
						});
					}
				})

			},
			openMember() {
				this.$refs.MemberPopupVueRef.show()
			},
			openPopupCard(url) {
				this.showPopupCard = true
			},
			cancel() {
				this.showPopup = false
			},
			confirm() {
				this.showPopup = false
				//已关注删除
				uni.removeStorageSync('popupTimestamp')
			},
			subShow() {
				this.isShow = false
				this.showPopup = true
			},
			//关闭 设置时间
			closeShow() {
				official_account_close().then(res => {
					this.isShow = false
				})

			},
			gosharecard() {
				uni.navigateTo({
					url: '/pagesC/my/cardMoney'
				})
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},




			getData() {
				let token = uni.getStorageSync('token')
				if (!token) return



				InformationMyIncome().then(res => {
					this.MyIncome = res.data
					this.user = res.data.user
				})
				InformationUserInfo().then(res => {
					this.userInfo = res.data
					if (res.data.circle_id && res.data.circle_end_time) {
						const expiry = new Date(res.data.circle_end_time);
						const today = new Date();
						const diff = expiry.getTime() - today.getTime();
						const days = diff / (1000 * 60 * 60 * 24);

						if (days > 0 && days <= 10) {
							this.circleEnd = 1
						} else if (days < 0) {
							this.circleEnd = 2
						}
					}

					this.template = {
						css: {
							// 根节点若无尺寸，自动获取父级节点
							width: '690rpx',
							height: '560rpx',
							background: '#fff',
							borderRadius: '30rpx',
							boxSizing: "border-box",
							overflow: 'hidden',
							border: '8px soild #999'
						},
						views: [{
								type: 'image',
								src: res.data.business_card_img,
								css: {
									width: '690rpx',
									height: '380rpx',
									top: "0",
									right: "0",
									position: "absolute",
									zIndex: '4',
								}
							},
							{
								type: "view",
								css: {
									background: '#fff',
									height: "180rpx",
									width: '690rpx',
									top: "380rpx",
									position: "absolute",
									zIndex: "9",
									display: 'flex',
									alignItems: 'center',
									justifyContent: 'space-between'
								},
								views: [{
										type: 'text',
										text: '长按或扫描二维码\n查看我的名片',
										css: {

											color: '#333',
											fontSize: '30rpx',
											fontWeight: 'bold',
											marginLeft: "50rpx",
											letterSpacing: '10px'
										}
									},
									{
										type: 'image',
										src: res.data.user_QR_code,
										css: {
											width: '140rpx',
											height: '140rpx',
											marginRight: "30rpx"
										}
									},
								]
							},
						]
					}

				})
				gzhewm().then(res => {
					this.popupImg = res.data
				})
				official_account().then(res => {
					if (res.show_popup === 1) {

						this.isShow = true
					}
				})

			},
			toPage(name) {
				switch (name) {
					case '我的消息':
						uni.navigateTo({
							url: '/pagesC/message/message'
						})
						break;
					case '联合创始':
						uni.navigateTo({
							url: '/pagesA/coFounding/coFounding?type=1'
						})
						break;
					case '带货':
						uni.navigateTo({
							url: '/pagesA/coFounding/coFounding?type=2'
						})
						break;
					case '提现记录':
						uni.navigateTo({
							url: '/pagesA/withdrawalRecord/withdrawalRecord'
						})
						break;
					case '提现资料':
						uni.navigateTo({
							url: '/pagesA/paymentCode/paymentCode'
						})
						break;
					case '能量站':
						uni.navigateTo({
							url: '/pagesC/energyStation/energyStation'
						})
						break;
					case '日志管理':
						uni.navigateTo({
							url: '/pagesA/logManagement/logManagement'
						})
						break;
					case '我的订单':
						uni.navigateTo({
							url: '/pagesA/myOrder/index'
						})
						break;
					case '管理视频':
						uni.navigateTo({
							url: '/pagesA/videoManagement/videoManagement'
						})
						break;
					case '我的收藏':
						uni.navigateTo({
							url: '/pagesB/myCollection/myCollection'
						})
						break;
					case '用户帮助':
						uni.navigateTo({
							url: '/pagesA/userHelp/userHelp'
						})
						break;
					case '余额':
						uni.navigateTo({
							url: '/pagesA/withdrawalRecord/balanceRecord'
						})
						break;
					case '认证中心':
						if (this.isCard) {
							uni.navigateTo({
								url: '/pagesA/authenticationCenter/authenticationCenter'
							})
						} else {
							uni.navigateTo({
								url: '/pagesC/index/addMyCard'
							})
						}

						break;
					case '隐私设置':
						if (this.isCard) {
							uni.navigateTo({
								url: '/pagesA/privacySettings/privacySettings'
							})
						} else {
							uni.navigateTo({
								url: '/pagesC/index/addMyCard'
							})
						}

						break;
					case '圈子管理':
						if (this.isCard) {
							if (this.circleEnd == 2) {
								uni.navigateTo({
									url: "/pagesA/beforeCreateCircle/beforeCreateCircle?cid=" + this.userInfo
										.circle_id +
										'&ctype=' + this.userInfo.circle_type
								})
							} else {
								uni.navigateTo({
									url: '/pagesA/circleManage/circleManage?near=' + this.circleEnd +
										'&circleType=' +
										this.userInfo.circle_type +
										'&circleId=' + this.userInfo.circle_id
								})
							}

						} else {
							uni.navigateTo({
								url: '/pages/index/addMyCard'
							})
						}

						break;
					case '兴趣管理':
						if (this.isCard) {
							uni.navigateTo({
								url: '/pagesA/interestManage/interestManage'
							})
						} else {
							uni.navigateTo({
								url: '/pagesC/index/addMyCard'
							})
						}

						break;
					default:
						break;
				}
			},
			open() {
				this.$refs.WithdrawalPopupRef.show()

			},
			reload() {
				this.getData()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mpbox {
		width: 690rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		height: auto;
		overflow: hidden;
		margin: 0 auto;
		margin-bottom: 30rpx;

		image {
			border-radius: 20rpx;
			width: 100%;
			display: flex;
			// height: 100%;
		}

	}

	.box {

		min-height: 100vh;
		background: linear-gradient(to bottom, #b4f0df 0%, #f6f7f8 473rpx, #f6f7f8 473rpx, #f6f7f8 100%);
		/* 设置渐变色 */
	}

	image {
		width: 100%;
		height: 100%;
	}

	.barTitle {
		width: 100%;
		position: fixed;
		left: 0;
		top: -473rpx;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #211C1E;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99;
	}

	.header {
		width: 690rpx;
		margin: 0 auto;
		display: flex;
		margin-bottom: 60rpx;

		.header-img {
			width: 130rpx;
			height: 130rpx;
			margin-right: 30rpx;
		}

		.header-c {
			min-width: 0;
			flex: 1;

			// margin-bottom: 21rpx;
			// display: flex;
			// align-items: flex-start;
			// justify-content: space-between;
			// flex-direction: column;
			.header-c-t {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 10rpx;

				.header-c-t-l {
					flex: 1;
					display: flex;
					align-items: center;

					&-member {
						width: 30rpx;
						height: 30rpx;
						// background-color: red;
						margin-right: 20rpx;
					}

					.header-c-t-l-name {
						font-family: PingFang;
						font-weight: 800;
						font-size: 36rpx;
						color: #21222B;
						margin-right: 20rpx;
					}

					.header-c-t-l-sex {
						width: 30rpx;
						height: 30rpx;
						margin-right: 20rpx;
					}

					.headbg {
						display: flex;
						align-items: center;
						background: #999;
						height: 50rpx;
						width: 230rpx;
						justify-content: space-between;
						border-radius: 25rpx;

						.xz {
							font-family: PingFang;
							font-weight: 500;
							font-size: 22rpx;
							color: #FFFFFF;
							margin-right: 16rpx;
						}
					}

					.header-c-t-l-btn {
						width: 162rpx;
						height: 50rpx;
						background: #12B475;
						border-radius: 25rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 28rpx;
							height: 28rpx;
							margin-right: 12rpx;
						}

						font-family: PingFang;
						font-weight: 800;
						font-size: 22rpx;
						color: #FFFFFF;
					}
				}

				.header-c-t-setting {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		.header-c-age {
			width: 100%;
			// margin-bottom: 17rpx;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #131313;
			margin-bottom: 10rpx;
		}

		.header-c-zc {
			padding: 6rpx 10rpx;
			font-family: PingFang;
			font-weight: 500;
			font-size: 22rpx;
			color: #FFFFFF;
			background: #CBCBCB;
			display: inline-block;
		}
	}

	.list {
		width: 690rpx;
		margin: 0 auto;
		padding: 30rpx;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		border-radius: 20rpx;
		background: #FFFFFF;
		grid-gap: 30rpx;

		.list-item-c {
			width: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			font-family: PingFang;
			font-weight: 400;
			font-size: 26rpx;
			color: #21222B;
			position: relative;

			.end {
				background: #e4393c;
				right: 0;
				top: 0;
				position: absolute;
				width: 60rpx;
				height: 28rpx;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 14rpx;
			}

			image {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 21rpx;
			}

			button {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
			}
		}
	}

	.headerCard {
		width: 690rpx;
		margin: 0 auto;
		// height: 175rpx;
		background: #12B475;
		border-radius: 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		margin-bottom: 25rpx;
		overflow: hidden;
		// display: flex;
		// align-items: center;

		&-t {
			padding: 16rpx 24rpx;
			background: linear-gradient(to right, #F6E0A4, #E9C27C);
			font-size: 26rpx;
			color: #965A0B;


			// <view class="headerCard-t flex-row-between" @click="openMember" >
			// 	<view class="flex-row">
			// 		<view class="imgbg"><image :src="ossUrl + '/static/image/vip/2.png'" class="vip-img"></image></view>

			// 		VIP会员可享受10+超级特权
			// 	</view>
			// 	<view class="kt">立即开通</view>
			// </view>

			.imgbg {
				width: 56rpx;
				height: 56rpx;
				border-radius: 50%;
				background: #2F2F2F;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;

			}

			.vip-img {
				width: 24rpx;
				height: 24rpx;
				//background-color: red;
				// margin-right: 20rpx;
			}

			.kt {
				background: #2F2F2F;
				color: #DDCCA4;
				font-weight: bold;
				height: 56rpx;
				line-height: 56rpx;
				padding: 0 28rpx;
				border-radius: 28rpx;
			}
		}

		.headerCard-l {
			// min-width: 0;
			// flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;

			&>view {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
			}

			&>view {
				position: relative;

				view {
					font-family: PingFang SC;
					font-weight: 300;
					font-size: 26rpx;
					color: #FFFFFF;

					.status {
						font-family: PingFang SC;
						font-weight: 300;
						font-size: 22rpx;
						color: #FFFC00;
						margin-left: 20rpx;
					}
				}

				view:first-child {
					margin-bottom: 39rpx;
				}

				view:last-child {
					font-size: 40rpx;
				}

				.amount {
					font-family: PingFang SC;
					font-weight: 600;
					font-size: 40rpx;
					color: #FFFFFF;
				}
			}

			.income::after {
				content: "";
				width: 1rpx;
				height: 56rpx;
				background: #FFFFFF;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
			}

			// .balance {
			// 	text {
			// 		font-family: PingFang SC;
			// 		font-weight: 300;
			// 		font-size: 26rpx;
			// 		color: #FFFFFF;

			// 	}
			// 	text:first-child{
			// 		margin-bottom: 39rpx;
			// 	}
			// 	.amount {
			// 		font-family: PingFang SC;
			// 		font-weight: 600;
			// 		font-size: 22rpx;
			// 		color: #FFFFFF;
			// 	}
			// }
		}


	}

	.headerCard-r {
		display: flex;
		align-items: center;
		justify-content: center;

		.withdraw {
			min-width: 140rpx;
			height: 54rpx;
			background: #FFFFFF;
			border-radius: 54rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #12B475;
			margin-right: 30rpx;
			box-sizing: border-box;
			padding: 0 20rpx;
		}

		.record {
			width: 140rpx;
			height: 54rpx;
			border: 1px solid #FFFFFF;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}

	.auth {
		width: 670rpx;
		height: 143rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		padding-top: 30rpx;
		margin-bottom: 24rpx;

		image {
			width: 143rpx;
			height: 143rpx;
			margin-right: 36rpx;
		}
	}

	.gz {
		width: 650rpx;
		position: fixed;
		bottom: -150rpx;
		left: 50rpx;
		height: 80rpx;
		border-radius: 10rpx;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: center;
		padding: 0 50rpx 0 20rpx;
		box-sizing: border-box;
		z-index: 99;
		justify-content: space-between;
		overflow: hidden;
		transition: all 0.5 ease;

		.gz-tx {
			font-size: 28rpx;
			color: #fff;
		}

		.gz-btn {
			padding: 5rpx 20rpx;
			box-sizing: border-box;
			border: 1rpx solid #fff;
			color: #fff;
			font-size: 28rpx;
			border-radius: 15rpx;
		}

		.gz-close {
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			right: -40rpx;
			top: -40rpx;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 50%;

			.gz-close-icon {
				position: absolute;
				top: 45rpx;
				right: 45rpx;
			}
		}
	}

	.gz-ac {
		bottom: 30rpx;
	}

	.slot-content {
		width: 100%;

		.slot-content-img {
			width: 600rpx;
			box-sizing: border-box;
			padding: 30rpx;
			border-radius: 30rpx;

			image {
				width: 100%;
			}
		}
	}

	.pay-container {
		border-radius: 20rpx;
		overflow: hidden;
		border: 1px solid #f3f0e7;

		&.acitve {
			border-color: #df614d;
		}
	}

	.pay-bottom {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20rpx 40rpx 40rpx;
		background-color: #fff;
		box-sizing: border-box;

		.discounts {
			font-size: 26rpx;
			color: #d68238;
		}

		.pay-coupon {
			font-size: 20rpx;
			color: #777777;
			margin: 10rpx 0;
		}

		.pay-botton {
			width: 100%;
			padding: 20rpx 0;
			text-align: center;
			background-color: #dd5845;
			border-radius: 50rpx;
			color: #fff;
		}
	}

	.placeholder {
		height: 200rpx;
	}

	.table {
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: -10px 0 10px -5px #f8f8f8,
			/* 左侧阴影 */
			10px 0 10px -5px #f8f8f8,
			/* 右侧阴影 */
			0 10px 10px -5px #f8f8f8;

		/* 底部阴影 */
		.cell {
			padding: 20rpx;

			.right {
				width: 60rpx;
				text-align: center;
				color: #ab9871;
			}

			.wrong {
				width: 60rpx;
				text-align: center;
				color: #aeaeae;
			}
		}

	}

	.title {

		font-size: 35rpx;
		font-weight: bold;
	}

	.pay {
		width: 100%;
		padding: 20rpx;
		background-color: #fff;
		box-sizing: border-box;

		&-time {
			font-size: 30rpx;
			font-weight: bold;
			color: #d17d68;
		}

		&-price {
			font-size: 40rpx;
			font-weight: bold;
			color: #d17d68;
			margin: 10rpx 0;
		}

		&-price.acitve {
			color: #df614d;
		}

		&-calc {
			font-size: 20rpx;
			color: #d18370;
		}

		&-tag {
			width: 100%;
			background-color: #f3f0e7;
			padding: 10rpx 0;
			font-size: 20rpx;
		}

		&-tag.acitve {
			background-color: #df614d;
			color: #fff;
		}
	}

	.header-c-t-l-member {
		margin-right: 5rpx;
		height: 25rpx !important;
	}

	.headerCard-t {
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}

	.header-box {
		width: 690rpx;
		background: #17C581;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;

		.header-box-card {
			background: #00B66F;
			border-radius: 20rpx;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			box-sizing: border-box;
			padding: 25rpx 27rpx;



			.header-box-card-tx {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
			}

			.header-box-card-num {
				font-family: PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}

		.header-box-c {
			width: 100%;
			display: flex;
			box-sizing: border-box;
			padding: 25rpx 27rpx;
			display: grid;
			grid-template-columns: repeat(4, 1fr);

			.header-box-c-tx {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
			}

			.header-box-c-num {
				font-family: PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}

		.header-box-rule {
			width: 624rpx;
			margin: 0 auto;
			padding: 28rpx 0;
			border-top: 1rpx solid #fff;
			font-family: PingFang SC;
			font-weight: 300;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}
</style>